<template>
  <li class="vux-timeline-item">
    <div v-if="index>$parent.currentIndex"
         class="vux-timeline-item-color vux-timeline-item-head"
         style="background-color:#cfcfcf;">
    </div>
    <div v-else-if="index===$parent.currentIndex"
         :class="['vux-timeline-item-no']"
         style="background-color:#5cb156;">
      <icon v-show="$parent.isShowIcon" type="waiting" class="vux-timeline-item-checked"></icon>
    </div>
    <div v-else
         :class="['vux-timeline-item-color', 'vux-timeline-item-head-first']"
         style="background-color:#5cb156;">
      <icon v-show="$parent.isShowIcon" type="success_no_circle" class="vux-timeline-item-checked"></icon>
    </div>

    <div class="vux-timeline-item-tail" :style="tailStyle"></div>
    <div class="vux-timeline-item-content">
      <div class="header">
        <div
          :class="['title',{'done':index<$parent.currentIndex,'current':index==$parent.currentIndex,'wait':index>$parent.currentIndex}]">
          {{title}}
        </div>
        <div class="status">
          <span v-if="index<$parent.currentIndex" class="done">已完成</span>
          <span v-else-if="index==$parent.currentIndex&&!$parent.isStop" class="current">正在进行</span>
           <span v-else-if="index==$parent.currentIndex&&$parent.isStop" class="current">已终止</span>
          <span v-else-if="index>$parent.currentIndex" class="wait">未开始</span>
        </div>
      </div>
      <ul class="desc">
        <li v-for="item in desc">{{item}}</li>
      </ul>
    </div>
  </li>
</template>

<script>
  import Icon from 'vux/src/components/icon'

  export default {
    name: 'timeline-item',
    data () {
      return {
        index: 0,
        isLast: true,
        isFirst: true,
        headStyle: {backgroundColor: this.$parent.color}
      }
    },
    props: {
      title: String,
      desc: {type: Array, default: []}
    },
    mounted () {
      this.$parent.setChildProps()
    },
    beforeDestroy () {
      // this will be null
      const $parent = this.$parent
      this.$nextTick(() => {
        $parent.setChildProps()
      })
    },
    components: {
      Icon
    },
    computed: {
      tailStyle () {
        return this.isLast ? {display: 'none', backgroundColor: this.$parent.color} : {
          display: 'block',
          backgroundColor: this.$parent.color
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  .header {
    .title, .status {
      box-sizing: border-box;
      display: inline-block;
      font-size: 16px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
    .title {
      width: 62%;
    }
    .status {
      text-align: right;
      width: 32%;
    }
    .done {
      color: #62AC5E;
    }
    .wait {
      color: #4A4A4A;
    }
    .current {
      color: #DC220B;
    }
  }

  ul.desc {
    list-style: none;
    li {
      font-size: 14px;
      color: #888;
    }
  }
</style>
